<template>
  <div>
    <!-- 使用v-if指令来控制main-content的显示 -->
    <div class="main-content" v-if="flag === 'A'">
      <h2>人员</h2>
      <div class="user-info-card">
        <div class="avatar"></div>
        <table>
          <tr>
            <td>用户名：</td>
            <td>{{ userInfo.username }}</td>
          </tr>
          <tr>
            <td>姓名：</td>
            <td>{{ userInfo.name }}</td>
          </tr>
          <tr>
            <td>电话：</td>
            <td>{{ userInfo.phone }}</td>
          </tr>
          <tr>
            <td>邮箱：</td>
            <td>{{ userInfo.email }}</td>
          </tr>
        </table>
        <button @click="modifyInfo()">修改</button>
        <router-view></router-view>
      </div>
    </div>
    <!-- router-view用于显示modify路由对应的页面 -->
    <router-view v-else-if="flag === 'B'"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: "",
        name: "",
        phone: "",
        email: "",
      },
      // 添加一个状态变量来控制是否显示修改页面
      flag: "A",
    };
  },
  methods: {
    fetchUserInfo() {
      // 假设后端API的URL是'/api/user-info'
      axios
        .get("/api/user-info")
        .then((response) => {
          // 假设后端返回的数据结构是 { data: { username, name, phone, email } }
          this.userInfo = response.data;
        })
        .catch((error) => {
          console.error("There was an error fetching the user info:", error);
        });
    },
    modifyInfo() {
      (this.flag = "B"),
        // 使用编程式导航跳转到modify路由
        this.$router.push({ name: "modify" });
    },
  },
  mounted() {
    this.fetchUserInfo();
  },
};
</script>

<style scoped>
.container {
  display: flex;
}

.sidebar {
  width: 200px; /* 菜单栏宽度 */
  background-color: #4a90e2; /* 菜单栏背景颜色 */
  color: white; /* 文字颜色 */
  padding: 20px; /* 内边距 */
}

.logo {
  max-width: 100%; /* 保持图片宽高比 */
  margin-bottom: 10px; /* 图片与文字之间的间距 */
}

.main-content {
  flex-grow: 1; /* 占据剩余空间 */
  padding: 20px; /* 内容内边距 */
}

.user-info-card {
  border: 1px solid #ccc; /* 卡片边框 */
  padding: 20px; /* 内边距 */
  text-align: left; /* 文本左对齐 */
}

.avatar {
  width: 50px; /* 头像宽度 */
  height: 50px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  background-color: lightgray; /* 默认灰色背景 */
  margin-right: 15px; /* 与文本的距离 */
}

table {
  width: 100%; /* 表格宽度 */
  margin-top: 5px; /* 与上方的距离 */
}

td:first-child {
  font-weight: bold; /* 第一列加粗显示 */
}

button {
  background-color: green; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  padding: 8px 16px; /* 按钮内边距 */
  border: none; /* 无边框 */
  cursor: pointer; /* 鼠标悬停时变为手型 */
  margin-top: 10px; /* 与上方元素的间距 */
}
</style>
